<script setup>
import Statistic from "@/components/HomeComponents/HomeStatisticComp.vue";
import HomeActivitiesComp from "@/components/HomeComponents/HomeActivitiesComp.vue";
import HomeUserListComp from "@/components/HomeComponents/HomeUserListComp.vue";
import HomeBottomComp from "@/components/HomeComponents/HomeBottomComp.vue";
import HomeChartsComp from "@/components/HomeComponents/HomeChartsComp.vue";
</script>

<template>
  <div style="width:100%;height:100%;">

    <el-row :gutter="20" class="home-header">
      <el-col :span="17">
        <HomeActivitiesComp>
        </HomeActivitiesComp>
      </el-col>
      <el-col :span="7">
        <HomeUserListComp></HomeUserListComp>
      </el-col>
    </el-row>
    <el-row class="home-footer">
      <el-col :span="24" >
        <HomeChartsComp></HomeChartsComp>
      </el-col>
    </el-row>
  </div>

</template>
<style scoped lang="scss">
.home-header{
  width: 100%;
  height: 53vh;
}
:deep(.el-card__body){
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

</style>
